<!--
  @FileDescription: 弹窗组件,
  @params:{
    modeVal: // <Any>弹窗内容组件
    params: // <Any>传递给弹窗的params值
    tit: // 标题名字 View=>查看 Edit=>编辑 Add=>新增
    config: //配置，具体参数如dialogCofig对象注释
  },
  @Date:2023:12:13 00:45:00,
  @LastEditTime:2023:12:13 00:45:00,
  @Author: Ciwei,
 -->
<script setup lang="ts">
    const emits = defineEmits(['doChange'])
    const mode = ref<any>('')
    const open = ref<boolean>(false)
    const info = ref<any>('')
    const title = ref<string>('')
    let dialogCofig = reactive({
        width:'60%', //弹窗宽度
        draggable:true, //为 Dialog 启用可拖拽功能
        modal:true, //是否需要遮罩层
        modalClass:'', //遮罩的自定义类名
        appendToBody:false, //Dialog 自身是否插入至 body 元素上。 嵌套的 Dialog 必须指定该属性并赋值为 true
        top:'15vh', //dialog CSS 中的 margin-top 值，默认为 15vh
        fullscreen:false, //是否为全屏 Dialog
        lockScroll:true, //是否在 Dialog 出现时将 body 滚动锁定
        customClass:'', //Dialog 的自定义类名
        openDelay:'', // dialog 打开的延时时间，单位毫秒
        closeDelay:'', //drawer 关闭的延时时间，单位毫秒
        closeOnClickModal:false, //是否可以通过点击 modal 关闭 Dialog
        closeOnPressEscape:false, //是否可以通过按下 ESC 关闭 Dialog
        showClose:true, //是否显示关闭按钮
        center:false, //是否让 Dialog 的 header 和 footer 部分居中排列
        alignCenter:false, //是否水平垂直对齐对话框 2.2.16版本
        destroyOnClose:false, //当关闭 Dialog 时，销毁其中的元素
        // closeIcon:'Close', //自定义关闭图标，默认 Close
        zIndex:'', //和原生的 CSS 的 z-index 相同，改变 z 轴的顺序
    })
    function init(modeVal,params,tit,config) {
        dialogCofig = Object.assign(dialogCofig,config)
        mode.value = modeVal
        info.value = params
        title.value = tit
        open.value = true
    }
    function getTitle(title) {
        const f={
            'View':'查看',
            'Edit':'编辑',
            'Add':'新增'
        }
        return f[title] ? f[title] : title
    }
    function cancel() {
        open.value = false
    }
    function doChange(m:unknown,mm:unknown,mmm:unknown) {
        emits('doChange',m,mm,mmm)
    }
    defineExpose({init})
</script>

<style scoped>

</style>
<template>
    <el-dialog v-model="open" :title="getTitle(title)" v-bind="dialogCofig">
        <component v-if="open" :is="mode" :params="info" @cancel="cancel" @doChange="doChange"></component>
    </el-dialog>
</template>
